<div ng-controller='flows' ng-init="init()">
  <head>
  	<script ng-show="panel.chart == 'flows'" type="text/javascript" src="app/panels/flows/lib/sankey_overlap.js"></script>
	<style>
	.node rect {
	  cursor: move;
	  fill-opacity: .9;
	  shape-rendering: crispEdges;
	}
	
	.node text {
	  fill: #000;
	  pointer-events: none;
	  text-shadow: 0 1px 0 #fff;
	}

	.node:hover text {
	  fill: #fff;
	  pointer-events: none;
	  text-shadow: 0 1px 0 #000;
	}
	
	.link {
	  fill: none;
	  stroke: #000;
	  stroke-opacity: .2;
	}
	
	.link:hover {
	  stroke-opacity: .5;
	}

	/* edges css */

	.node_e {
	  font: 300 10px "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-size: 0.7vw;
	  fill: #777;
	}
	
	.node_e:hover {
	  font-size: 0.9vw;
	  fill: #000;
	}
	
	.link_e {
	  stroke: steelblue;
	  stroke-opacity: .4;
	  fill: none;
	  pointer-events: none;
	}
	
	.node_e:hover,
	.node--source,
	.node--target {
	  font-weight: 700;
	}

	.node--source {
	  fill: #2ca02c;
	}
	
	.node--target {
	  fill: #d62728;
	}
	
	.link--source,
	.link--target {
	  stroke-opacity: 1;
	  stroke-width: 2px;
	}
	
	.link--source {
	  stroke: #d62728;
	}
	
	.link--target {
	  stroke: #2ca02c;
	}

	</style>
  </head>
  <div flows params="{{panel}}" ng-style="{height:panel.height||row.height}"></div>
</div>
